<template>
  <div id="app">
    <!-- <router-link to="/home" tag="button" replace>首页</router-link> -->
    <!-- <router-link to="/about" tag="button" active-class="active">关于</router-link> -->
    <h2>APP组件</h2>

    <!-- 使用事件进行跳转 -->
    <button @click="linkHome">首页</button>
    <button @click="linkAbout">关于</button>
    <button @click="linkUser">用户</button>
    <button @click="linkProfile">我的</button>

    <!-- 占位符 -->
    <keep-alive exclude="Profile,User">
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: "App",

  data() {
    return {
      userId: "zhangSan",
    };
  },

  methods: {
    linkHome() {
      // console.log("[跳转] 首页跳转");
      // 通过代码的方式修改路由 然后进行跳转 [vue-router]
      // this.$router.push("/home");
      this.$router.replace("/home");
    },

    linkAbout() {
      // console.log("[跳转] 关于跳转");
      // this.$router.push("/about");
      this.$router.replace("/about");
    },

    linkUser() {
      this.$router.push(`/user/${this.userId}`);
    },

    linkProfile() {
      // 1. 使用对象形式传递参数跳转
      this.$router.push({
        path: "/profile",
        query: {
          name: "Mr.chen",
          age: 18,
        },
      });
    },
  },
};
</script>

<style scoped>
.active {
  color: rgb(255, 0, 0);
}
</style>
